<template>
  <div id="tpractice">
	<!-- 专科版本添加详情盒子 -->
	<div style="width:1200px; margin:0 auto; position:relative">
		<div class="detailBox blocks">
      <div class="chapterList-top">
        <p class="fl">章节列表</p>
        <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
      </div>
			<el-collapse  accordion v-model="activeName" @change="handleChange">
				<div v-for="(item,index) in appList"  :key="index" >
					<el-collapse-item v-if="item.levels == 3" :name='index' :disabled = item.locked>
						<template slot="title">
							<div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
						  		 <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i> 
                		<i class="iconfont icon-baoguofahuo" v-else></i> 
							    	<span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                    <i class="iconfont icon-lock"  v-if="item.locked"></i>
					        </div>
						</template>
						<div v-for="(items,indexs) in item.children"  :key="indexs" >
							<div :class="items.locked? 'courseName2' : 'courseName' " >
								{{indexs+1}}&nbsp;{{items.name}}&nbsp;
								<i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3" style="vertical-align:baseline"></i>
								<i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
              				    <i class="iconfont icon-lock"  v-if="items.locked"></i>
							</div>
               <!-- 多加数据为空 -->
				<div v-if="items.otherInfo.length <=0 ">
					<span style="padding-left:23px; color:rgb(66, 66, 66)">暂无数据</span>
				</div>
						<div v-else sclass="detailbox" v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
							<div v-show="!items.locked">
								<div class="infoName" style="padding:2px 0 2px 15px;" :class="item3.type == 4 && item3.id == chapterId? 'studying':''">
									<i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
									<span class="crile" :class="item3.type == 4 && item3.id == chapterId? 'crileBg':''" v-else></span>
									<span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
									<span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>
								</div>
								<div class="fr studying" v-if="item3.type == 4 && item3.id == chapterId">正在学<i class="iconfont icon-shijian00"></i></div>
							</div>
						</div>
					</div>
					</el-collapse-item>
					<el-collapse-item  v-if="item.levels == 2" :name='index' :disabled = item.locked>
						<template slot="title">
							 <div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
								<i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i> 
                                <i class="iconfont icon-baoguofahuo" v-else></i>  
								<span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
								<i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3" style="vertical-align:baseline"></i>
                                <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
								<i class="iconfont icon-lock"  v-if="item.locked"></i>
							</div>
						</template>
						<div v-if="item.otherInfo.length > 0">
							<div class="detailbox" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
								<div class="infoName" :class="item2.type == 4 && item2.id == chapterId? 'studying':''">
									<i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
									<span class="crile" :class="item2.type == 4 && item2.id == chapterId? 'crileBg':''" v-else></span>
									<span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
									<span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
								</div>
								<div class="fr studying" v-if="item2.type == 4 && item2.id == chapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
							</div>
						</div>
						<div v-else style="padding-left:25px;">暂无数据</div>
					</el-collapse-item>
				</div>
			</el-collapse>
	    </div>
	</div>
	<!-- 专科版本弹窗 -->
	<el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
		<div class="dialog-content">
			<i class="iconfont icon-tishi"></i>
			<p>有其它实验正在进行中，是否停止它进入该实验?</p>
		</div>
		<span slot="footer" class="dialog-footer btnlist">
			<el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
			<el-button class="button-style" @click="VirtualSave">确 定</el-button>
		</span>
    </el-dialog>
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content" >
          <div v-if="courseTitleData">
            <span style="display:inline-block; overflow:hidden;" class="preview-title">随堂练习</span>
            &nbsp;
            <span style="display:inline-block; overflow:hidden;" class="mr0">{{ courseTitleData.courseName }}</span>
            <span style="display:inline-block; overflow:hidden;" class="preview-line">/</span>
            <span :title="courseTitleData.chapterName" class="beyond-hiding" style="display:inline-block;width:550px;">{{ courseTitleData.chapterName }}</span>
            <span class="chapterlists" @click="detalList" v-if=' _btn_flag == undefined'><i class="iconfont icon-liebiao1"></i> &nbsp;章节列表</span>
          </div>
          <div v-else>
            <span class="preview-title">随堂练习</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="mr0">{{skillName }}</span>
            <span class="preview-line">/</span>
            <span>{{ chapterName }}</span>
		       	<span class="chapterlists" @click="detalList" v-if=' _btn_flag == undefined'><i class="iconfont icon-liebiao1"></i> &nbsp;章节列表</span>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content exam-top">

      <div class="exam-top-content" v-if="resQuestionData">
        <!-- 标题，如果是选择题显示多选题或单选题 -->
        <div class="exam-title">
          <span>{{ resQuestionData.typeName }}</span>
          <span v-if="resQuestionData.type === 1">
            <span v-if="resQuestionData.isMultipleChoice">[多选题]</span>
            <span v-if="!resQuestionData.isMultipleChoice">[单选题]</span>
          </span>
        </div>
        <!-- <div class="exam-rightbox">
          <div class="question-tab">
            <el-popover class="question-popover" placement="top-start" title="" width="" trigger="click">
              <el-tabs v-model="tabActiveName" class="question-popover-tab">
                <el-tab-pane v-for="(item,index) in resQuestionData.answerSheetList" :key="index" :name="String(item.type)">
                  <span slot="label">
                    <el-badge :value="item.answerSheetList.length" class="item">{{ item.typeName }}</el-badge>
                  </span>
                  <ul class="question-tab-item clearfix">
                    <li @click="clickQuestion(item2)" :class="{'active':isActive(item2,index2)}" v-for="(item2,index2) in item.answerSheetList" :key="index2">{{ item2.orderNumber }}</li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
              <div class="button-style" slot="reference">答题情况</div>
            </el-popover>
          </div>
          <div @click="submitExam" class="button-style">提交</div>
          <div @click="exitExam" class="button-style">退出随堂练习</div>
        </div> -->
      </div>
    </div>
    <div class="exam-content" v-if="resQuestionData">
      <div class="jian-box">
        <div class="jian-content">
          <div @click="prevQuestion" class="an-question prev-question" :class="{'disabled-question':resQuestionData.orderNumber === 1}"></div>
          <div @click="nextQuestion" class="an-question next-question" :class="{'disabled-question':resQuestionData.orderNumber === resQuestionData.questionCount}"></div>
        </div>
      </div>
      <div class="answer-title">
        <span>{{ resQuestionData.orderNumber }}、</span>
        <span v-html="resQuestionData.content"></span>
        <!-- <span class="c-blue">{{ resQuestionData.score }}分</span> -->
        <!-- 题/共多少题 -->
        <span class="question-num c-blue">{{ resQuestionData.orderNumber }}/{{ resQuestionData.questionCount }}</span>
      </div>
      <!-- answer:[] -->
      <!-- 选择题 -->
      <!-- 答案给序号 [0,1] -->
      <div v-if="resQuestionData.type === 1">
        <!-- 多选题 -->
        <div v-if="resQuestionData.isMultipleChoice">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item,index) in resQuestionData.choiceList" :key="index" :label="index" class="jx-content">
              <div class="exam-item-xuan">{{ chose[index] }}</div>
              <div class="exam-item-chose" v-html="item"></div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 单选题 -->
        <div v-if="!resQuestionData.isMultipleChoice">
          <el-radio-group v-model="radio">
            <el-radio v-for="(item,index) in resQuestionData.choiceList" :key="index" :label="index" class="jx-content">
              <template slot-scope="scope">
                <div class="exam-item-xuan">{{ chose[index] }}</div>
                <div class="exam-item-chose" v-html="item"></div>
              </template>
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 判断题 -->
      <!-- answer:true -->
      <div v-if="resQuestionData.type === 2">
        <div class="jx-content">
          <el-radio-group v-model="radio2">
            <el-radio :label="true">正确</el-radio>
            <el-radio :label="false">错误</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 填空 -->
      <div class="jx-content fill-content" v-if="resQuestionData.type === 3 && fillList.length">
        <div>请填写答案：</div>
        <span v-show="false">{{ fillStr }}</span>
        <div v-for="(item,index) in fillList" :key="index">
          <span class="row-index">{{ index+1 }}.</span>
          <el-input v-model="fillList[index]"></el-input>
        </div>
      </div>
      <!-- 简答 -->
      <!-- answer:'xxxxx' -->
      <div v-if="resQuestionData.type === 4">
        <div class="jx-content">
          <div>请填写答案：</div>
          <br />
          <mavonEditor ref="answer"></mavonEditor>
        </div>
      </div>
      <div v-if="resQuestionData.type != 7" :class="{'cursor-pointer':!isAnswerShow}" @click="isAnswerShow = true" class="jx-content show-answer">
        <span v-if="isAnswerShow" v-html="'答案：'+resQuestionData.rightAnswer"></span>
        <span v-else>
          <i class="iconfont icon-xianshidaan"></i>
          点击显示答案
        </span>
      </div>
      <div class="uploadquestion" v-else>
        <img src="../../../assets/images/upload-question.png" />
        <div>
          提示：该题型由学生上传ZIP文件
        </div>
      </div>
      <!-- <div class="btn-group question-change">
        <el-button :disabled="resQuestionData.orderNumber === 1" @click="prevQuestion" class="button-style">上一题</el-button>
        <el-button :disabled="resQuestionData.orderNumber === resQuestionData.questionCount" @click="nextQuestion" class="button-style">下一题</el-button>
      </div> -->
    </div>

  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      courseTitleData: "",
      chapterId: '',
      courseId: '',
      //yx 添加
      skillName: this.$route.query.skillName,
      chapterName: this.$route.query.chapterName,

      //显示答案
      isAnswerShow: false,
      tabActiveName: "2",
      //单选
      radio: "",
      //多选
      checkList: [],
      chose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      //填空题数组
      fillList: [],
      //判断题
      radio2: "",
      //当前题
      resQuestionData: "",
      timer: null,
      timeLeft: null,
      //下一个题的id
      nextId: "",
      //答案
	  answer: "empty",
	  //专科版本
	  activeName:'',
	  appList:[],
	  roles:'',
	  //是否添加过班级
	  userStatus:'',
      //弹窗
      dialogVirtual:false,
      //判断是否从技术库
	  _btn_flag:'',
	  //存储点击的那个章节id
	   clickId:'',
     openFlag:'',

     // 班级ID
      classId: '',


      singleTask:'',
      stepType:'',
    };
  },
  computed: {
    //填空题字符串
    fillStr() {
      let that = this;
      if (that.fillList.length) {
        //把学生添加的英文逗号","改为中文逗号"，"
        $.each(that.fillList, function(i, d) {
          that.fillList[i] = d.replace(/,/g, "，"); //把,替换成，
        });
        let result = that.fillList.join(",");
        console.log(result, 222);
        return result;
      }
    }
  },
  //专科版本
  created(){
	// 从状态管理获取roles
	this.roles = this.$store.state.user.roles[0]
	//专科版本
	this._btn_flag = this.$route.query._btn_flag
	// 课程ID
	this.chapterId = this.$route.query.chapterId,
	//章节
  this.courseId = this.$route.query.courseId,
  //班级Id
  this.classId = this.$route.query.classId
	console.log( this.classId,999)
    this.DetailData()
    this.ClassInit()
    
    //yx 添加分辨率判断
    this.$nextTick(()=>{
        if(window.screen.height <= 900){
            //console.log(window.screen.height,147)
            $('.blocks').css('max-height','520px')
            $('.detailBox').css('max-height','520px')
            
        }
    })
  },
  mounted() {
	this.init();
	//初始化列表数据

  },
  methods: {
	//专科版本建设
	//初始化详情列表
	 handleChange(val){
      //val 索引
      this.openFlag = val
      let vals = String(val)
      this.openFlag = vals  
  },
	DetailData(){
		let self = this
		self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
			let res = response.data
			if(res.code == '200'){
				self.appList = res.data
			}else{
				self.$message.error(res.message)
			}
		}).catch(err => {
			console.log(err)
		})
	},
    //点击详情
	detalList(){
		let self = this
		let IndexValue;
		for(let i =0; i< self.appList.length; i++){
			if(self.appList[i].chapterIds.includes(Number(self.chapterId))){
				IndexValue = i
			}
		}
		// for(let i =0; i< this.appList.length; i++){
		// 	if(this.appList[i].recentlyStudiedFlag == 1){
		// 		IndexValue = i
		// 	}
		// }
		self.activeName = IndexValue
		//最近学习索引等于打开这项
    this.openFlag = IndexValue
    this.scrollFn(790)
     //判断屏幕分辨率
      if(window.screen.height <= 900){
          this.scrollFn(540)
      }
		$('.detailBox').stop().slideToggle()
  },
   //点击关闭
      deleteFns(){
          $('.detailBox').hide()
      },
	//自动到最近学习
	scrollFn(n){
		// this.$nextTick(()=>{
		//     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top},20)
		// })
		this.$nextTick(()=>{
			let topValue = $('.studying').parent().offset().top
			console.log(topValue,7878)
			if(topValue > n){
				$(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
			}

		})
	},
	// 是否添加过班级
	ClassInit() {
		let self = this
		self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
			let res = response.data
			if(res.code == '200'){
				self.userStatus = res.data
			}else{
				self.$message.error(res.message)
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 确定跳转实验详情
	VirtualSave(){
		let self = this
		if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
			// 跳转实验页
				self.$router.push({
				path: "/Teaching/MyCourses/VirtualMachine",
				query: {
					courseId: self.courseId,
					chapterId: self.clickId,
					classId:self.classId,
					singleChaper:self.clickId 
				}
			})
		}else if(self.roles == 'STUDENT'){
				self.$router.push({
				path: "/Teaching/MyCourses/STVirtualMachine",
				query: {
					courseId: self.courseId,
					chapterId: self.clickId,
					classId:self.classId,
					singleChaper:self.clickId 
				}
			})
		}
		self.dialogVirtual = false
	},
	//跳转
	EnteDetails(item,itembig,items){
    let self = this
   
     //如果为真，可以跳转
      self.singleTask =  item.chapterId
      //self.stepTypeStr = ''
      if(itembig.levels == 2 ){
          self.stepType = itembig.stepTypeStr
      }else if( itembig.levels == 3){
          self.stepType = items.stepTypeStr
      }
    //如果为真，可以跳转
     if((!itembig.locked && itembig.levels == 2) || (items && !items.locked && itembig.levels == 3 )){
      if(item.show){
          if(item.name == '理论学习' || item.name == '任务引导'){
          self.$router.push({
            path:'/Teaching/MyCourses/CoursewareDetail',
            query:{
              courseId: self.courseId,
              chapterId: item.id,
              classId:self.classId,
              singleChaper:item.id
              
            }
          })
        }else if(item.name == '教学资源'){
          self.$router.push({
            path:'/Teaching/MyCourses/CourseResourceDetail',
            query:{
              courseId: self.courseId,
              chapterId: item.id,
              classId:self.classId,
              singleChaper:item.id
            }
          })
        }else if(item.name == '备课材料'){

          self.$router.push({
            path:'/Teaching/MyCourses/CourseMaterialDetail',
            query:{
              courseId: self.courseId,
              chapterId: item.id,
              classId:self.classId,
              singleChaper:item.id
            }
          })
        }else if(item.name == '实验学习' ||  item.experimentCourseFlag){
          if(self.userStatus == 'NOT_CREATE_CLASS'){
            self.$router.push({
              path:'/Teaching/MyCourses/VirtualMachineManual',
              query:{
                courseId: self.courseId,
                chapterId: item.id,
                classId:self.classId,
                stepTypeStr : self.stepType,
                singleChaper : item.chapterId,
              }
            })
          }else if(self.userStatus == 'EXIST_CLASS'){
            self.clickId = item.id
			self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
			let res = response.data
				if(res.data.allocated){
				
				self.$http.get('/tes/experiment/course/'+item.id+'/prompt').then(response => {
					let res = response.data
					if(res.code == '200'){
						if(res.data){
							// 弹窗是否强制跳转
							self.dialogVirtual = true
						}else{
							if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
								// 跳转实验页
								self.$router.push({
									path: "/Teaching/MyCourses/VirtualMachine",
									query: {
										courseId: self.courseId,
										chapterId: item.id,
										classId:self.classId,
										stepTypeStr: self.stepType,
										singleChaper:self.singleTask
									}
								})   
							}else if(self.roles == 'STUDENT'){
								// 跳转实验页
								self.$router.push({
									path: "/Teaching/MyCourses/STVirtualMachine",
									query: {
										courseId: self.courseId,
										chapterId: item.id,
										classId:self.classId,
										stepTypeStr: self.stepType,
										singleChaper:self.singleTask
									}
								})
							}
						}
					}else{
						self.$message.error(res.message)
					}
				}).catch(err => {
					console.log(err)
				})
			}else{
				self.$router.push({
					path: '/Teaching/MyCourses/VirtualMachineManual',
					query: {
						courseId: self.courseId,
						chapterId: item.id,
						classId:self.classId,
						stepTypeStr: self.stepType,
						singleChaper:self.singleTask

					}
				})
			}
		}).catch(err => {
			console.log(err)
		})
		}       
        }else if(item.name == '随堂练习'){
          //分为学生和老师身份
          if(self.roles == 'STUDENT'){
            if(self.userStatus=='NOT_CREATE_CLASS'){
              self.typesStatus = 1   //没有班级时传1  不显示提交按钮
            }else{
              self.typesStatus = 2  //有班级时传2 显示提交按钮
            }
            self.$router.push({
              path: "SPractice",
              query: {
                courseId: self.courseId,
                chapterId: item.id,
                typesStatus:self.typesStatus,
                classId:self.classId,
                singleChaper:item.id
              }
			})
			
          }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
            self.$router.push({
                path: "TPractice",
                query: {
                  courseId: self.courseId,
                  chapterId: item.id,
                  classId:self.classId,
                  singleChaper:item.id
                }
              })
            window.location.reload()
          }
        }
      }
     }
	},
    /*
      需求：
        角色：学生
        目的：随堂练习答题
        题型：选择，判断，填空，简答
        逻辑：答题后答题卡对应题答案改变，点击上一题下一题上传答题卡，答题回填，答题卡显示是否已答题，提交后刷新页面进入查看答题情况页面，无法再进入此页
      方法及属性
        1.reSubmitExam() 进入页面前判断是否提交，已提交跳转至SPracticeWatch页面查看答题情况
        2.获取当前题目和答题卡内容 getQuestionAndAnswerSheetListInit()
          2.1.回填已答过内容 fillQuestion()
          2.2.答题卡默认选中第一个题型 tabActiveName
    */
    init() {
      this.getCourseTitleData();
      //进入页面前判断是否提交
      //this.reSubmitExam();
      //关闭页面或浏览器时触发 退出随堂练习
      //window.addEventListener( 'beforeunload', e => this.exitExam() );
      //获取当前题目和答题卡内容
      this.getQuestionAndAnswerSheetListInit();
    },
    //公共接口，考试名称
    getCourseTitleData() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      if (that.chapterName) {
        return;
      }
      axios
        .get("/tes/course/" + that.courseId + "/chapter/" + that.chapterId)
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 666);
              that.courseTitleData = res.data.data;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //验证是否交卷 已交卷页面跳转到考试列表页面
    reSubmitExam() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      axios
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/status"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //true为已提交 进入SPracticeWatch页面查看提交结果 false为没提交
              let data = res.data.data;
              console.log(data, 11);
              if (data) {
                //进入查看页面
                that.$router.push({
                  path: "/SPracticeWatch",
                  query: {
                    courseId: that.courseId,
                    chapterId: that.chapterId
                  }
                });
              }
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //首次获取当前题目和答题卡内容
    getQuestionAndAnswerSheetListInit() {
      let that = this;
      axios
        ///course/{courseId}/chapter/{chapterId}/practice/
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice"
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              that.resQuestionData = resQuestionData;
              //回填
              //that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中第一个题型
              //that.tabActiveName = String(that.resQuestionData.type);
              console.log(that.tabActiveName, 12222);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //答题卡判断是否答题
    isActive(item2, index2) {
      //选择
      //多选 checkList:[]
      //单选 radio:''
      //填空 ''
      //判断 radio2:''
      //简答 ''
      //综上 不是空字符串 不是undefined 不是'empty' 是数组并且不是空数组
      //是数组
      let isNull = false;
      if (item2.type === 3 && item2.answer) {
        let fillList = item2.answer.split(",");
        isNull = fillList.some(item => item);
      }
      if (item2.answer instanceof Array) {
        return item2.answer.length;
      } else {
        //不是数组
        return (
          (isNull && item2.answer && item2.answer !== "empty") ||
          item2.answer === false
        );
      }
    },

    //发送答案 reqAnswer传答题卡答案 无返回 成功后执行getQuestionAndAnswerSheetList 重新获取列表
    reqAnswer(row, rowNow) {
      //row为选中题数据
      let that = this;
      //let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;
      let type = that.resQuestionData.type;

      //当前答题往答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        if (isMultipleChoice) {
          //多选 checkLis
          rowNow.answer = that.checkList;
        } else {
          //单选 radio
          rowNow.answer = that.radio;
        }
      }
      //判断 radio2 不为空才传答案
      if (type === 2) {
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //填空 简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      console.log(that.resQuestionData.answerSheetList, 66666);
      console.log(rowNow, "row");

      //初始化
      //单选
      that.radio = "";
      //多选
      that.checkList = [];
      //判断题
      that.radio2 = "";
      //填空
      that.fillList = [];
      //简答
      if (that.$refs.answer) {
        that.$nextTick(function() {
          that.$refs.answer.changeVal("");
        });
      }
      //答案
      //that.answer = "empty";

      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/1",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //选题 反答题卡和当前题
              that.getQuestionAndAnswerSheetList(row.id);
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //上一题 下一题 选题 获取当前题和答题卡列表
    getQuestionAndAnswerSheetList(rowId) {
      console.log(rowId,1);
      let that = this;
      //初始化
      //单选
      that.radio = "";
      //多选
      that.checkList = [];
      //判断题
      that.radio2 = "";
      //填空
      that.fillList = [];
      //简答
      if (that.$refs.answer) {
        that.$nextTick(function() {
          that.$refs.answer.changeVal("");
        });
      }
      axios
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice",
          {
            params: { questionId: rowId }
          }
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //答案初始化
              that.isAnswerShow = false;
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              that.resQuestionData = resQuestionData;
              //回填
              //that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中当前题型

              //that.tabActiveName = String(that.resQuestionData.type);
              //console.log(that.tabActiveName,34444);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //退出随堂练习
    exitExam() {
      let that = this;
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/exit"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message.success("退出成功");
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //上一题 获取答题卡当前题和上一题的row和当前题的rowNow  传答题卡reqAnswer
    prevQuestion() {
      let that = this;
      if (that.resQuestionData.orderNumber === 1) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex - 1];
      let rowNow = newAnswerSheetList[nowIndex];
      that.getQuestionAndAnswerSheetList(row.id);
      //传答案 传答题卡 反答题卡
      //this.reqAnswer(row, rowNow);
    },
    //下一题 获取答题卡当前题和下一题的row和当前题的rowNow  传答题卡reqAnswer
    nextQuestion() {
      let that = this;
      if (
        that.resQuestionData.orderNumber === that.resQuestionData.questionCount
      ) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));
      console.log(newAnswerSheetList,123);
      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex + 1];
      let rowNow = newAnswerSheetList[nowIndex];
      //传答案 传答题卡 反答题卡
      //this.reqAnswer(row, rowNow);
      that.getQuestionAndAnswerSheetList(row.id);
    },
    //点击答题卡选题 获取答题卡点击题的row和当前题的rowNow 传答题卡reqAnswer
    clickQuestion(row) {
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);

      //传答案 传答题卡
      //this.reqAnswer(row, rowNow);
      that.getQuestionAndAnswerSheetList(row.id);
    },

    //回填答案
    fillQuestion(resQuestionData) {
      console.log("回填");
      let that = this;
      let id = resQuestionData.id;
      let type = resQuestionData.type;
      console.log(resQuestionData, 1234);
      //回填，有值才回填
      if (
        //存在
        (resQuestionData.answer !== undefined &&
          //非空
          resQuestionData.answer !== "") ||
        //数组非空
        (Array.isArray(resQuestionData.answer) &&
          resQuestionData.answer.length !== 0)
      ) {
        //选择
        if (type === 1) {
          //多选
          if (resQuestionData.isMultipleChoice) {
            that.checkList = resQuestionData.answer;
          } else {
            //单选
            that.radio = resQuestionData.answer;
          }
        }
        //判断
        if (type === 2) {
          that.radio2 = resQuestionData.answer;
        }
        //填空
        if (type === 3) {
          let fillAnswers = resQuestionData.answer.split(",");
          $.each(that.fillList, function(i, d) {
            that.fillList[i] = fillAnswers[i];
          });
        }
        //简答
        if (type === 4) {
          console.log(resQuestionData.answer, 23445);
          that.$nextTick(function() {
            that.$refs.answer.changeVal(resQuestionData.answer);
          });
        }
      }
    },

    //交卷传当前题答案
    submitReqAnswer() {
      //row为选中题数据
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);
      //let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;

      //当前答题往答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        if (isMultipleChoice) {
          //多选 checkLis
          rowNow.answer = that.checkList;
        } else {
          //单选 radio
          rowNow.answer = that.radio;
        }
      }
      //判断 radio2 不为空才传答案
      if (type === 2) {
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //填空 简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      console.log(that.resQuestionData.answerSheetList, 66666);
      console.log(rowNow, "row");

      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/1",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log("交卷传答案成功");
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //交卷 传答题卡答案 页面跳转回考试列表页面
    submitExam() {
      //row为选中题数据
      let that = this;
      let answerSheetId = that.resQuestionData.answerSheetId;
      that.submitReqAnswer();
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/2",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message.success("提交成功");
              //进入考试页面
              that.$router.push({
                path: "/Teaching/MyCourses/CourseDetail"
              });
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
	},

  }
};
</script>
<style scoped>
   .courseName2{
        position: relative;
    }
   
   
    .courseName2 .icon-lock{
        position: absolute;
        right: -6px;
        top: 3px;
    }
    
    .el-collapse-item__header .collapsTitle2 .icon-lock{
        position: absolute;
        right: 11px;
        top: 3px;
    }
	.dialog-virtual>>>.el-dialog__footer{
        text-align: center;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #4a4a4a;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 760px;
    }
    .el-collapse{
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        background: #2d3136;
        color: #fff;
        border-bottom:none;
        text-align: center;
		position:relative
    }
    .el-collapse-item>>>.el-icon-arrow-right{
        display: none;
    }
    .el-collapse-item>>>.el-collapse-item__content{
        background: #26292c;
        color: #a2a3a4;
        padding: 5px 20px;

    }
    .el-collapse-item__content>div{
        padding: 4px 0;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        border-bottom:none;
    }
	.icon-42{
		font-size: 12px;
		vertical-align: text-bottom;
		margin-left: -2px;
		margin-right: 5px;
	}
</style>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#tpractice {
  .uploadquestion{
    padding:100px 0;
    text-align: center;
    > div{
      margin:20px;
      color: #727272;
    }
  }
	//专科版本添加
	.chapterlists{
		position: absolute;
		right: 0px;
		cursor: pointer;
    color: #bbb;
    &:hover{
      color: #fff;
    }
	}
	//详情盒子
	.detailBox{
		width: 400px;
		position: absolute;
		top: 88px;
		bottom: initial;
		right: 38px;
		background: #26292c;
		max-height: 760px;
		border-radius: 4px;
		display: none;
		z-index: 999;
    .chapterList-top{
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        padding: 0 18px;
        &>p{
            line-height: 50px;
            color: #a2a3a4;
        }
        i{
            color: #a2a3a4;
            &:hover{
                color: #fff;
                cursor: pointer;
            }
        }
    }
    .infoName{
        display: inline-block;
        //padding:2px 0 2px 15px;
         &:hover{
               span{color: #1374e4;}
               .crile{
                    background: #1374e4;
                }
            }
    }
    .icon-diannao-copy{
        font-size: 14px;
        margin-left: 8px;
        color: #1374e4;
        vertical-align:super
    }
    .courseName{
      margin: 5px 0;
      cursor: pointer;
		&:hover{
			color: #fff;
			
		}
		.icon-tubiaozhizuomoban1{
			color: #1374e4;
			font-size: 16px;
		}
    }
	}
	.collapsTitle{
      text-align: left;
      // margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 22px;
      color: #a2a3a4;
	  .collapsTitle_span{
			max-width: 270px;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 13px;
		}
		.icon-chaibaoguoqujian{
			color: #a2a3a4;
			font-size: 14px;
		}
		&:hover{
			color: #fff;
			.icon-chaibaoguoqujian{
					color: #fff;
			}
		}
	   .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
  	}
	.collapsTitle2{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
            max-width: 270px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 13px;
        }
        .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
        
    }
	.icon-shijian00{
		color: #1374e4;
		margin-left: 5px
	}

	.crile{
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #a2a3a4;
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 9px;

	}
	.studying{
		color: #1374e4;
	}
	.crileBg{
		background: #1374e4;
	}
	.detailbox{
		padding:2px 0 2px 15px;
		cursor: pointer;
		&:hover{
			color: #1374e4;
			.crile{
				background: #1374e4
			}
		}
	}
	.Tiltlefiles{
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 210px;
    cursor: pointer;
	}

	.intnet{
		color: #1277eb;
		font-size: 14px;
		display: inline-block;
		vertical-align: 12px;
	}
	.taskName{
		margin-right: 5px;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 300px;
	}
	.dialogList{
		.dialog-content{
			text-align: center;
			i{
				font-size: 50px;
				color: #d6d6d6;
				display: block;
				margin-top: 25px;
			}
			p{
				font-size: 14px;
				text-align: center;
				line-height: 18px;

			}
			.handbook-item{
				text-align: center;
				margin-top: 30px;
			}
		}
		.btnlist{
            .button-style{
                width: 90px;
            }
        }
	}
  img{
    max-width: 100%;
  }
  .jian-box {
    position: fixed;
    width: 1000px;
    height: 49px;
    top: 350px;
    .jian-content {
      position: relative;
      .an-question {
        width: 27px;
        height: 49px;
        position: absolute;
        top: 0;
        background: url("../../../assets/images/jian.png") no-repeat 0 0;
        cursor: pointer;
        &:hover {
          background: url("../../../assets/images/jian-hover.png") no-repeat 0 0;
        }
      }
      .disabled-question {
        cursor: no-drop;
        &:hover {
          background: url("../../../assets/images/jian.png") no-repeat 0 0;
        }
      }
      .prev-question {
        left: -80px;
      }
      .next-question {
        right: -80px;
        transform: rotate(180deg);
      }
    }
  }
  .jx-content {
    width: 1000px;
  }
  .fullscreen {
    top: 162px;
  }
  //修改按钮默认样式
  .el-button:focus {
    background-color: #fff;
    color: $btn-blue;
    border-color: $btn-blue;
  }
  .el-button:hover {
    background-color: $btn-blue;
    color: #fff;
    border-color: $btn-blue;
  }
  .show-answer {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: $blue;
    padding: 20px 40px;
    min-height: 76px;
  }
  .show-answer.jx-content{
    margin: 0 auto 20px;
  }
  .mr0 {
    margin-right: 0 !important;
  }
  .preview-top {
    position: relative;
    z-index: 2;
    height: 180px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 80px;
      line-height: 80px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
		position: relative;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 80px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
        .preview-score {
          width: 80px;
          input {
            width: 80px;
          }
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .fill-content {
    > div {
      padding: 10px;
    }
    .row-index {
      margin-right: 20px;
    }
    .el-input {
      width: 80%;
      input {
        width: 100%;
      }
    }
  }
  p {
    line-height: inherit;
    display: inline;
  }
  label.el-checkbox.jx-content,
  label.el-radio.jx-content {
    margin-left: 0;
    display: flex;
    white-space: normal;
    .el-checkbox__input,
    .el-radio__input {
      padding-top: 8px;
    }
    .el-checkbox__label {
      display: flex;
      font-size: 0;

      .exam-item-xuan {
        padding: 6px;
        font-size: 16px;
      }
    }
    .el-radio__label {
      display: flex;
      font-size: 0;
      .exam-item-xuan {
        padding: 0 6px;
        font-size: 16px;
      }
    }
    .exam-item-chose {
      line-height: 30px;
      font-size: 16px;
    }
  }
  .exam-top {
    width: 100%;
    padding: 0;
    position: fixed;
    top: 80px;
    z-index: 2;
    margin-top: 0;
    .exam-top-content {
      width: $width;
      margin: 0 auto;
      padding: 0 40px;
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      .exam-title {
        border-bottom: 2px solid $blue;
        color: $blue;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
      }
      .exam-rightbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          margin-left: 10px;
        }
        .question-tab {
        }
      }
    }
  }
  .exam-content {
    width: 1000px;
    margin: 0px auto 0;
    position: relative;
    z-index: 1;
    .answer-title {
      position: relative;
      line-height: 32px;
      font-size: 16px;
      padding: 30px 40px;
      font-weight: bold;
      .c-blue {
        margin: 0 0 0 10px;
        font-weight: normal;
      }
      .question-num{
        position:absolute;
        min-width:60px;
        left:1000px;
        top:30px;
      }
    }
    .question-item {
      margin-left: 42px;
      display: flex;
      .question-chose {
        &:after {
          content: "：";
        }
      }
      .question-item {
        flex: 1;
      }
    }
  }
}
.question-change {
  text-align: center;
  margin: 50px 0 0 0;
  .button-style {
    width: 280px;
    height: 49px;
    line-height: 49px;
    border-radius: 49px;
    font-size: 16px;
    margin: 0 10px;
  }
}
//悬浮框内容
.tab-popper.el-popper {
  width: 440px;
  box-sizing: border-box;
  padding: 0 16px 20px;
  position: relative;
  .el-badge__content {
    top: 14px;
  }
  .el-tabs__nav {
    padding: 0 20px;
  }
  .el-tabs__active-bar {
    left: 10px;
    padding: 0 10px;
    width: 42px !important;
    background-color: $blue;
  }
  .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
  .el-tabs__item:hover,
  .el-tabs__item.is-active {
    color: $blue;
  }
  .question-tab-item {
    padding: 20px 0 0 40px;
    li {
      cursor: pointer;
      position: relative;
      width: 22px;
      height: 23px;
      line-height: 23px;
      margin: 0 20px 20px 0;
      text-align: center;
      float: left;
      border: 1px solid #8e8e8e;
      color: #8e8e8e;
    }
    li.active {
      border-color: $blue;
      color: $blue;
      &:after {
        position: absolute;
        content: "\e614";
        bottom: -7px;
        font-family: "iconfont";
        color: #3fdb9b;
        background: #fff;
        line-height: 14px;
      }
    }
  }
}


</style>
